

<template>
<div class="mb-2 ">
  <q-card class="my-card ">
    <q-card-section class="row no-wrap items-center">

      <div style="min-width: 100px">
         <span class="text-left">{{props.Label}}
         <i class="fas fa-info-circle" v-if="props.Tips != ''">
             <q-tooltip self="top end" :delay="800" max-width="600px">
                 {{props.Tips}}
            </q-tooltip>
         </i> ：
       </span>
      </div>
      <div class="q-gutter-sm text-left">
        <q-radio color="cyan" dense v-for="(item,index) in props.RadioList" v-model="SelectValue" :disable="props.DisableIndex?.indexOf(index) > -1" :val="item" :label="LangArr[index]" />
      </div>
    </q-card-section>
  </q-card>
</div>
</template>
<script setup lang="ts">
import {defineEmits, defineProps, onMounted, ref, watch} from "vue"
import {Get, SetKVT} from "../../wailsjs/go/dbservice/DbConfigService";
import {GetLangArray} from "../utils/lang";

const props =defineProps({
  RadioList:{
    default:[],
    type:Array<any>
  },
  FirstValue:{
    default:"",
    type: String,
  },
  //禁止选中的下标
  DisableIndex:{
    type:Array<number>,
    default:[]
  },
  Tips:{
    type:String,
    default:""
  },
  Label:{
    type:String,
    default:""
  },

  //以下prop是数据配置相关，SaveToConfig置为false则不会读写配置
  SaveToConfig:{
    type:Boolean,
    default:true
  },
  ConfigKey:{
    type:String,
    default:""
  },
  ConfigType:{
    type:String,
    default:"default"
  },
})

const isFirstChange=ref(true)
const SelectValue = ref("");
const emit=defineEmits(["RadioChange"])

watch(() =>SelectValue.value, (val) => {
  emit("RadioChange",val)
  if(isFirstChange.value){
    isFirstChange.value=false
    return
  }
  if(props.SaveToConfig && props.ConfigKey){
    SetKVT(props.ConfigKey,val,props.ConfigType)
    //ToastInfo("已提交更改")
  }
}); // 监听props.value的变化，并将值赋给propValue

const LangArr =ref<string[]>([]) //语言包

onMounted(async () => {
  //从数据库中取出配置
  Get(props.ConfigKey).then((res: string) => {
    if (res) {
      SelectValue.value = res
    } else {
      SelectValue.value = props.RadioList[0]
    }
  })

  //分别获取语言包
  LangArr.value = GetLangArray(props.RadioList)

})



</script>
<style scoped>

</style>